<template>
  <header class="header">
    <div class="left">
      <a href="https://gitee.com">
        <img src="./../assets/favicon.png" class="logo" alt="logo" />
      </a>
      <div class="title" v-if="type=='login'">登录</div>
      <div class="title" v-else>注册</div>
    </div>
    <a class="right">
      <div class="group" v-if="type=='login'">
        <div>没有账号？</div>
        <a @click="goToSignup">点此注册</a>
      </div>
      <div class="group" v-else>
        <div>已有账号？</div>
        <a @click="goToLogin">点此登录</a>
      </div>
    </a>
  </header>
</template>

<script>
export default {
  components: {},
  props: {
    type: {
      type: String,
      default: "login"
    }
  },
  data() {
    return {};
  },
  methods: {
    goToLogin() {
      this.$router.push({ name: "login" });
    },
    goToSignup() {
      this.$router.push({ name: "signup" });
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 72px;
  box-sizing: border-box;
  width: 100%;
  height: 208px;
  img {
    max-width: 375px;
  }
  .logo {
    width: 64px;
    height: 64px;
    margin-right: 20px;
  }
  .left {
    display: flex;
    align-items: center;
    .title {
      color: #40485b;
      font-size: 56px;
      font-weight: bold;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }
}
</style>
